<!DOCTYPE html>
<html lang="en">

<head>
    <title>Let's Hike</title>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Libraries -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"
        crossorigin="anonymous"></script>

    <!-- Other libraries go here -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>

    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>
    <!-- Stuff for body goes here -->
    <nav class="navbar navbar-expand-lg bg-info">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Hikes by feng</a>
          <img src="images/logo.png" height="36">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" aria-disabled="true">Disabled</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
      <div class="container my-2">
        <div class="p-2 text-center bg-body-tertiary rounded-3">
          <img src="images/hike2.jpg" class="img-fluid rounded">
          <h1 class="text-body-emphasis">Welcome to feng's Hikes</h1>
          <p class="col-lg-8 mx-auto fs-5 text-muted">
            Let's learn about hiking together.
          </p>
        </div>
      </div>
      <div class="card-group">
        <div class="card">
          <img src="images/hike1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Dalingshan forest park</h5>
            <p class="card-text">An easy hike, perfect for beginners. Daling shan forest park offers well - maintained trails surrounded by lush greenery. You can enjoy the chirping of birds and the gentle rustling of leaves as you make your way through the forest. There are also several viewpoints where you can stop, take in the scenery, and capture beautiful photos.</p>
            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card">
          <img src="images/hike2.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">The linos</h5>
            <p class="card-text">This card has supporting text below as a natural lead - in to additional content. The linos is a coastal hiking spot that combines the beauty of the sea and the ruggedness of the cliffs. Hikers can enjoy the sea breeze, watch the waves crashing against the rocks, and on clear days, spot seabirds soaring overhead.</p>
            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card">
          <img src="images/hike3.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Simatai Great Wall</h5>
            <p class="card-text">Steep hike with lots of history,Far from Beijing.</p>
            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      

      <div class="b-example-divider"></div>

      <div class="container">
        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
          <p class="col-md-4 mb-0 text-body-secondary">&copy; 2025 feng, Inc</p>
      
          <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
            <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
          </a>
      
          <ul class="nav col-md-4 justify-content-end">
            <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
          </ul>
        </footer>
      </div>


    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->

    <!-- Link to scripts of your own -->
    <!-- <script src="./scripts/script.js"></script> -->

</body>

</html>